/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-07-14 15:10:40
 * @LastEditors: cuidm
 * @LastEditTime: 2022-10-20 17:01:57
 */
import React, { useEffect, useState, Fragment } from "react";
import {
    Button,
    Modal,
    Spin,
    Drawer,
} from "antd";
import request from "@/utils/request";
import { ProDescriptions } from '@ant-design/pro-components';
import cmdbres from "@/data/cmdbres";

const DetailsModal = (props) => {
    const { visible, setVisible, info } = props;
    const [dataSource, setDataSource] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        if (visible) {
            queryModelFilelds();
        }
    }, [visible])

    const queryModelFilelds = async () => {
        try {
            setLoading(true);
            let res = await request({ 
                ...cmdbres.queryModelPropertyList,
                data: {
                    queryFilter: {
                        EQ: {
                            cmModuleId: info.cmModuleId,
                        }
                    }
                }
            });
            setLoading(false);
            if (res && res.code == 200) {
                const arr = res.data?.filter(item=> item.woIsHidden == 0);
                setDataSource(res.data);
            }
        } catch (error) {
            console.log(error);
        }
    }

    return (
        <Drawer 
            className="drawer-table-columns create-field"
            title={'查看详情'}
            placement={'right'}
            width={600}
            onClose={() => { setVisible(false) }}
            visible={visible}
            footer={null}
        >
            <Spin spinning={loading}>
                <ProDescriptions
                    column={2}
                    ellipsis={true}
                    style={{ padding: "20px" }}
                >
                    {
                      dataSource?.map(item=> (
                        <ProDescriptions.Item label={item.propertyName} key={item.id}>
                            {item.propertyKey}
                        </ProDescriptions.Item>
                      ))  
                    }   
                </ProDescriptions>
            </Spin>
            <div className="hcp-modal-body-footer">
                <Button onClick={() => { setVisible(false) }} type="primary">确定</Button>
            </div>
        </Drawer>
    )
}

export default DetailsModal;